<template>
	<!-- 菜单工具条  设备数据-->
	<div class="h_heard">
		<div class="h_heard_left_icon"></div>
		<div class="h_heard_midol">传鸿组态</div>
		<div class="h_heard_right"></div>
	</div>
	<n-modal show="true">
		<!-- 登录卡 -->
		<n-card v-if="loginCard" style="width: 300px" title="登录" :bordered="false">
			<div v-if="!isLogin">
				<div class="h_info">
					<text class="h_info_lable">姓名:</text>
					<n-input type="text" size="large" class="h_info_val" placeholder="请输入姓名" v-model:value="userName" />
				</div>
				<div class="h_info">
					<text class="h_info_lable">账号:</text>
					<n-input type="text" size="large" class="h_info_val" placeholder="请输入账号" v-model:value="account" />
				</div>
				<div class="h_info">
					<text class="h_info_lable">密码:</text>
					<n-input type="text" size="large" class="h_info_val" placeholder="请输入密码" v-model:value="password" />
				</div>
			</div>
			<div class="h_flex_row_center" style="margin-top: 10px;">
				<n-button v-if="!isLogin" type="default" @click="showRegisterCard">注册账号</n-button>
				<div style="width:10px"></div>
				<n-button v-if="!isLogin" type="default" @click="showFindPasswordCard">忘记密码</n-button>
				<div style="width:10px"></div>
				<n-button v-if="!isLogin" type="default" @click="showSetCard">设置</n-button>
			</div>
			<div class="h_flex_row_center" style="margin-top: 20px;">
				<n-button v-if="!isLogin" type="primary" @click="login">登录</n-button>
				<div style="width:10px"></div>
				<n-button v-if="isLogin" type="primary" @click="bindLogout">退出登录</n-button>
			</div>
		</n-card>
		<!-- 设置卡 -->
		<n-card v-if="setCard" title="设置" style="width: 500px" :bordered="false" size="huge" role="dialog"
			aria-modal="true">
			<div class="h_info">
				<text style="width:180px">数据服务器地址:</text>
				<text class="h_info_val">{{ dataSvevrAddr }}</text>
			</div>
			<div class="h_info">
				<text style="width:180px">连接状态:</text>
				<text class="h_info_val">{{ serverState ? '已连接到服务器' : '未连接到服务器' }}</text>
			</div>
			<div class="h_info">
				<text style="width:120px">IP地址:</text>
				<n-input type="text" size="large" class="h_info_val" placeholder="请输入服务器地址" v-model:value="svevrIP" />
			</div>
			<div class="h_info">
				<text style="width:120px">端口号:</text>
				<n-input type="text" size="large" class="h_info_val" placeholder="请输入端口号" v-model:value="portNumber" />
			</div>
			<div class="h_flex_row_center"><n-button style="margin-top: 20px;" @click="setDateServerUrl">设置</n-button></div>
		</n-card>
		<!-- 注册卡 -->
		<n-card v-if="registerCard" title="注册" style="width: 300px" :bordered="false" size="huge" role="dialog"
			aria-modal="true">
			<div class="n-input-group">
				<div class="h_info">
					<text class="h_info_lable">账号</text>
					<n-input type="text" size="large" class="h_info_val" placeholder="请输入账号" v-model:value="account" />
				</div>
				<div class="h_info">
					<text class="h_info_lable">密码</text>
					<n-input type="text" size="large" class="h_info_val" placeholder="请输入密码" v-model:value="password" />
				</div>
				<div class="h_info">
					<text class="h_info_lable">电话</text>
					<n-input type="text" size="large" class="h_info_val" placeholder="请输入密码" v-model:value="userTelphon" />
				</div>
			</div>
			<div class="h_flex_row_center">
				<n-button type="primary" style="margin-top: 20px;" @click="register">注册</n-button>
			</div>
		</n-card>
		<!-- 找回密码 -->
		<n-card v-if="findPasswordCard" title="找回密码" style="width: 300px" :bordered="false" size="huge" role="dialog"
			aria-modal="true">
			<div class="cu-item shadow">
				<div class="h_info">
					<div class="h_info_lable">姓名:</div>
					<n-input type="text" size="large" class="h_info_val" placeholder="请输入姓名" v-model="userName" />
				</div>
				<div class="h_info">
					<div class="h_info_lable">手机:</div>
					<n-input type="text" size="large" class="h_info_val" placeholder="请输入手机号码" v-model="userTelphon" />
				</div>
				<div class="h_flex_row_center">
					<n-button type="primary" style="margin-top: 20px;" @click="findPassword">找回密码</n-button>
				</div>
			</div>
		</n-card>
	</n-modal>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入 ★
/* ================================================================================================ */
import { h, ref, reactive, computed, watch, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { useMessage } from 'naive-ui';

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const workStore = useWorkStore(); // 设备数据
const message = useMessage()// 消息
const router = useRouter();
/* ================================================================================================ */
//                                数据 ★
/* ================================================================================================ */
let isLogin = ref(false); //登录状态
let setCard = ref(false); //登录卡
let loginCard = ref(true); //登录卡
let registerCard = ref(false); //注册卡
let findPasswordCard = ref(false); //找回密码卡
let userName = '黄传鸿'; //用户名
let userTelphon = '17304775090'; //电话
let dataSvevrAddr = '192.168.0.100'; //数据服务器地址
let svevrIP = '192.168.0.100'; //服务器地址
let portNumber = '8000'; //端口号
let account = 'hchh'; //账号
let password = '12345678'; //密码
let serverState = true; //服务器状态

/** 开启服务 */
const onStartServer = () => {
	// console.log("开启服务");
	/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	// 🐸 发送
	/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	axios({
		url: `/api/HCIOT?query=startServer`,
		method: 'get',
	})
		.then((response: any) => {

		})
		.catch(() => {

		})
}

//设置本机数据
const setDateServerUrl = () => {
	// console.log("设置本机数据")
	isLogin.value = false;
	setCard.value = false;
	registerCard.value = false;
	findPasswordCard.value = false;
	loginCard.value = true;
};

//显示设置卡
const showSetCard = () => {
	// console.log("显示设置卡")
	isLogin.value = false;
	loginCard.value = false;
	registerCard.value = false;
	findPasswordCard.value = false;
	setCard.value = true;
};
//显示注册卡
const showRegisterCard = () => {
	// console.log("显示注册卡")
	isLogin.value = false;
	loginCard.value = false;
	setCard.value = false;
	registerCard.value = false;
	findPasswordCard.value = false;
	registerCard.value = true;
};

//显示找回密码卡
const showFindPasswordCard = () => {
	// console.log("注显示找回密码卡册")
	isLogin.value = false;
	loginCard.value = false;
	setCard.value = false;
	registerCard.value = false;
	findPasswordCard.value = true;
};

//注册
const register = () => {
	// console.log("注册")
	setCard.value = false;
	registerCard.value = false;
	findPasswordCard.value = false;
	loginCard.value = true;
};

//登录
const login = () => {
	// console.log("登录")
	onStartServer();//开启服务
	loginCard.value = false;
	setCard.value = false;
	registerCard.value = false;
	findPasswordCard.value = false;
	isLogin.value = true;
	/** 路由 */
	const url = router.resolve({
		path: "/home",
	});
	
	window.close();
	// // console.log(url.href)  // 输出路经
	// 打开新窗口
	window.open(url.href);

};

//退出登录
const bindLogout = () => {
	// console.log("退出登录");
	isLogin.value = false;
	setCard.value = false;
	registerCard.value = false;
	findPasswordCard.value = false;
	loginCard.value = true;
}

//找回密码
const findPassword = () => {
	// console.log("找回密码")
	isLogin.value = false;
	setCard.value = false;
	registerCard.value = false;
	findPasswordCard.value = false;
	loginCard.value = true;
}


</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

.user {
	width: 100vw;
	height: 100vh;
}

/* 参数 */
.h_info {
	padding: 5px;
	width: 100%;
	user-select: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: start;
	align-items: center;
}

/* 参数标题 */
.h_info_lable {
	padding-left: 3px;
	width: 60px;
	font-size: 16px;
}

/* 参数变量 */
.h_info_val {
	width: 100%;
	margin-right: 5px;
}
</style>
